<template>
  <div class="content">
    <!-- 英语学习 顶部Logo栏 -->
    <div class="top-contain">
      <div class="logoBlock">
        <!-- <el-avatar :size="50"></el-avatar>
                <div>用户名</div> -->
        <a href="#" title="Study English">
            <img src="~/assets/img/study-logo.png" width="100%" height="100%" alt="Study English">
        </a>
      </div>
    </div>

    <div class="m-contain">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label" class="tab-title"><i class="el-icon-edit-outline"></i> 背单词</span>
              <div class="card" v-for="item in selectWord" :key="item.id">
                <div class="card-body">
                    <div class="cover">
                      <img :src="item.cover" width="100%" height="100%" alt="book cover">
                    </div>
                    <div class="progress-box">
                      <p class="progress-title">已完成进度</p>
                      <p class="progress-percent">
                        <span><b>{{item.rememberNumber}}/{{item.wordNumber}}词</b></span>
                      </p>
                      <el-progress :percentage="item.rememberNumber / item.wordNumber * 100" status="success"></el-progress>
                    </div>
                </div>
                <a class="btn-choose-grade" :href="'/studyWord/' + item.id">{{item.name}}</a>
                <!-- <div class="btn-choose-grade">
                  <router-link :to="{path: '/studyWord/' + item.id}">{{item.name}}</router-link>
                </div> -->
              </div>
          </el-tab-pane>
          <el-tab-pane label="听听力">
            <span slot="label" class="tab-title"><i class="el-icon-service"></i> 听听力</span>
            <!-- 听听力
            <audio  controls="controls" src="https://guli-edu-20221107.oss-cn-shenzhen.aliyuncs.com/cet4-201812-1.mp3"></audio>
            <div class="content markdown-body" v-html="article.content"></div> -->
            <div class="card-listening">
            <div class="card-header-listening">
                <div class="card-header-title-listening">
                    <b>听力</b>
                    <el-select class="el-select-listening" v-model="value" filterable placeholder="请选择" size="small" @change="selectListeningType()">
                        <el-option
                        v-for="item in listeningTypeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <el-divider class="el-divider-listening"></el-divider>
            <div class="card-body-listening">
                <el-table class="el-table-listening"
                    :data="listeningList"
                    :header-cell-style="{'color':'#212529', 'text-align': 'center'}"
                    :cell-style="{'text-align':'center'}" >
                    <el-table-column
                        prop="name"
                        label="名称">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="chooseListening(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
          </el-tab-pane>
          <el-tab-pane label="看书籍">
            <span slot="label" class="tab-title"><i class="el-icon-notebook-2"></i> 看书籍</span>
            <div class="card-reading">
            <div class="card-header-reading">
                <div class="card-header-title-reading">
                    <b>书籍</b>
                    <div class="search-book">
                        <el-input placeholder="输入关键字搜索书籍" v-model="bookKeywords"   @keydown.enter.native="searchBook()">    
                        </el-input><el-button slot="append" icon="el-icon-search" @click="searchBook()"></el-button>
                    </div>
                </div>
            </div>
            <el-divider class="el-divider-reading"></el-divider>
            <div class="card-body-reading">
                <el-table class="el-table-reading"
                    :data="readingList"
                    :header-cell-style="{'color':'#212529', 'text-align': 'center'}"
                    :cell-style="{'text-align':'center'}" >
                    <el-table-column
                        prop="name"
                        label="书名">
                    </el-table-column>
                    <el-table-column
                        prop="author"
                        label="作者">
                    </el-table-column>
                    <el-table-column
                        prop="description"
                        label="简介">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="chooseReading(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
          </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>

<script>
import cookie from "js-cookie";
import studyApi from '@/api/study'
import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body

export default {
  data() {
    return {
        selectWord: [],
        listeningTypeList: [],
        value: '',
        listeningList: [],
        readingList: [],
        bookKeywords: ''
    };
  },

  created() {
    this.getSelectWordList()
    this.getStudyListeningTypeList()
    this.getBookList()
  },

  methods: {
    searchBook() {//条件过滤(书籍或作者)查找书籍
      studyApi.searchBook(this.bookKeywords).then(response => {
            var data = response.data.data
            this.readingList = data.list
        })
    },

    chooseReading(index, row) {
      this.$router.push('/studyReading/' + row.id)
    },

    chooseListening(index, row) {
        this.$router.push('/studyListening/' + row.id)
    },

    getBookList() {
        studyApi.getBookList().then(response => {
            var data = response.data.data
            this.readingList = data.list
        })
    },

    selectListeningType() {
      this.getStudyListeningList(this.value)
    },

    getStudyListeningTypeList() {
        studyApi.getStudyListeningTypeList().then(response => {
            var data = response.data.data
            this.listeningTypeList = data.list 
            this.value = this.listeningTypeList[0].id 
            this.getStudyListeningList(this.value)
        })
    },

    getStudyListeningList(typeId) {
        studyApi.getStudyListeningList(typeId).then(response => {
            var data = response.data.data
            this.listeningList = data.list
        })
    },


    //获取 背单词 界面列表
    getSelectWordList() {
      studyApi.getSelectWordList().then(response => {
        this.selectWord = response.data.data.list
      })
    },
  },
};
</script>

<style scoped>

.content {
  /* 上 右 下 左 */
  margin: 10px 0px 0px 0px;
  /* padding-bottom: 100px; */
}

.top-contain {
  max-width: 1150px;
  margin: 0 auto;
}
.logoBlock {
  width: 300px;
  height: 64.87px;
  margin: 0 auto;
}

.m-contain {
  max-width: 1150px;
  margin: 0 auto;
  margin-top: 20px;
}

.el-tabs {
  background-color: #F5F7FA;
  margin-bottom: 40px;
}

.tab-title {
  font-size: 20px;
}

.card {
    margin: 0 auto;
    border-radius: 5px;
    border: 0px solid transparent;
    box-shadow: 0 0 20px rgb(0 0 0 / 8%);
    background-color: white;
    height: 444.2px;
    width: 795.8px;
    padding-top: 20px;
    margin-bottom: 20px;
}

.card-body {
    width: 755.8px;
    margin: 0 auto;
}
.cover {
  width: 200px;
  height: 283px;
  vertical-align: middle;
  margin: 0 auto;
}

.progress-title {
  font-size: 20px;
}

.el-progress {
  padding-left: 20px;
}

.progress-percent {
  text-align: right;
  padding-bottom: 10px;
}

.progress-percent span{
  margin-right: 35px;
}

.btn-choose-grade {
  width: 100%;
  margin: 0px auto;
  margin-top: 40px;
  text-decoration:none;
  text-align: center;
  font-size: 18px;
  border: 1px solid black;
  display: block;
  border-radius: 2px;
  color: #6c757d;
}

.btn-choose-grade:hover {
  background-color: #6c757d;
  color: white;
}

.card-listening, .card-reading {
    max-width: 1150px;
    border: 3px solid #E8E9EE;
    border-radius: 10px;
    margin: 0 auto;
    background-color: #FFFFFF;
}

.card-header-listening, .card-header-reading {
    padding: 5px 20px;
    background-color: #F7F7F7;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.card-header-title-listening, .card-header-title-reading {
    font-size: 18px;
}

.el-select-listening {
    float: right;
}

.el-divider-listening, .el-divider-reading {
    margin-bottom: 0px;
    margin-top: 0px;
}

.card-body-listening, .card-body-reading {
    padding: 10px 25px;
}

.el-table-listening, .el-table-reading {
    margin: 0 auto;
}
.search-book {
  display: inline-block;
  margin-left: 20px;
}

.el-input {
  /* 搜索框长度 */
  width: 400px;
}

</style>